<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>购物车</title>
    <link rel="stylesheet" href="css/carts.css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="css/slide.css"/>
    <script type="text/javascript" src="js/http.js"></script>
</head>

<body>

<div class="site-nav" id="site-nav">
    <div class="w w1200">
        <div class="fl">
            <div class="city-choice" id="city-choice" data-ectype="dorpdown">
                <div class="dsc-choie dsc-cm" ectype="dsc-choie">
                    <img src="images/place.png" class="place"/>
                    <input type="text" value="千峰教育" class="search"/>
                </div>

            </div>
            <div class="txt-info" id="ECS_MEMBERZONE">
                <a href="index1.html" class="link-login red">首页</a>
                <a href="#" class="link-login red">请登录</a>
                <a href="#" class="link-regist">免费注册</a>
            </div>
        </div>
        <ul class="quick-menu fr">
            <li>
                <div class="dt">
                    <a href="#" id="my_balance">我的余额</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="dt">
                    <a href="#">我的订单</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="dt">
                    <a href="#">我的浏览</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="dt">
                    <a href="#">我的收藏</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="dt">
                    <a href="#">客户服务</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li class="li_dorpdown" data-ectype="dorpdown">
                <div class="dt dsc-cm">网站导航</div>
                <div class="dd dorpdown-layer" style="z-index: 10000000;">
                    <dl class="fore1">
                        <dt>特色主题</dt>
                        <dd>
                            <div class="item">
                                <a href="#" target="_blank">家用电器</a>
                            </div>
                            <div class="item">
                                <a href="#" target="_blank">手机数码</a>
                            </div>
                            <div class="item">
                                <a href="#" target="_blank">电脑办公</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="fore2">
                        <dt>促销活动</dt>
                        <dd>
                            <div class="item">
                                <a href="#">拍卖活动</a>
                            </div>
                            <div class="item">
                                <a href="#">共创商品</a>
                            </div>
                            <div class="item">
                                <a href="#">优惠活动</a>
                            </div>
                            <div class="item">
                                <a href="#">批发市场</a>
                            </div>
                            <div class="item">
                                <a href="#">超值礼包</a>
                            </div>
                            <div class="item">
                                <a href="#">优惠券</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>

</div>

<div class="clear"></div>


<div class="w1200_container" style="padding-top: 50px">
    <section class="cartMain">
        <div class="cartMain_hd">
            <ul class="order_lists cartTop">
                <li class="list_chk">
                    <!--所有商品全选-->
                    <input type="checkbox" id="all" class="whole_check">
                    <label for="all"></label> 全选
                </li>
                <li class="list_con">商品信息</li>
                <li class="list_info">发货方式</li>
                <li class="list_price">单价</li>
                <li class="list_amount">数量</li>
                <li class="list_sum">金额</li>
                <li class="list_op">操作</li>
            </ul>
        </div>

        <div class="cartBox">

            <div class="order_content" id="cart_content">

            </div>
        </div>


        <!--底部-->
        <div class="bar-wrapper">
            <div class="bar-right">
                <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
                <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
                <div class="calBtn">
                    <a href="javascript:settlement();">结算</a>
                </div>
            </div>
        </div>

    </section>
    <section class="model_bg"></section>

    <section class="my_model">
        <p class="title">删除宝贝<span class="closeModel">X</span></p>
        <p>您确认要删除该宝贝吗？</p>
        <div class="opBtn">
            <a href="javascript:;" class="dialog-sure">确定</a>
            <a href="javascript:;" class="dialog-close">关闭</a>
        </div>
    </section>
</div>
<!--底部-->


<template id="template_goods">
    <ul class="order_lists">
        <li class="list_chk">
            <input type={{id}} class="id" style="display:none">
            <input type="checkbox" id="checkbox_{{id}}" class="son_check">
            <label for="checkbox_{{id}}"></label>
        </li>
        <li class="list_con">
            <div class="list_img">
                <a href="javascript:;"><img src="{{goodsUrl}}" alt=""></a>
            </div>
            <div class="list_text">
                <a href="javascript:;">{{goodsName}}</a>
            </div>
        </li>
        <li class="list_info">
            <p>默认：邮寄</p>
        </li>
        <li class="list_price">
            <p class="price">￥{{price}}</p>
        </li>
        <li class="list_amount">
            <div class="amount_box">
                <a href="javascript:;" class="reduce reSty">-</a>
                <input type="text" value="{{goodsNum}}" class="sum">
                <a href="javascript:;" class="plus">+</a>
            </div>
        </li>
        <li class="list_sum">
            <p class="sum_price">￥{{subtotal}}</p>
        </li>
        <li class="list_op">
            <p class="del">
                <a href="javascript:;" class="delBtn">移除商品</a>
            </p>
        </li>
    </ul>
</template>


</body>
<script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="js/kuCity.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlider.js"></script>
<script type="text/javascript" src="js/slide.js"></script>

<!--加载购物车-->
<script>
    //获取数据
    let list = JSON.parse(sessionStorage.getItem("list"));

    $(function () {

        refreshMyBalance();

        addCartList();

    });

    function refreshMyBalance() {

        let dbUser = localStorage.getItem("userInfo");

        let obj = JSON.parse(dbUser);

        let balance = obj.userBalance;

        $("#my_balance").html("我的余额: ￥" + balance);
    }


    function addCartList() {

        //业务内容清空
        $("#cart_content").html("");

        let goodsListHtml = "";
        //获取模板
        let goodsTemplate = $("#template_goods").html();


        list.forEach(item => {
            console.log(item.imgUrl);
            let goodsHtml = goodsTemplate
                .replaceAll("{{goodsName}}", item.remark)
                .replaceAll("{{id}}", item.goodsId)
                .replaceAll("{{goodsUrl}}", item.imgUrl)
                .replaceAll("{{goodsNum}}", item.goodsNum)
                .replaceAll("{{subtotal}}", item.subtotal)
                .replaceAll("{{price}}", item.price);
            //拼接HTML
            goodsListHtml += goodsHtml;
        });


        //填充html到指定位置
        $("#cart_content").html(goodsListHtml);

        list = [];
        sessionStorage.setItem("key", JSON.stringify(list));

    }


    $('.li_dorpdown').hover(function () {
        $('.dorpdown-layer').show();
    });
    $('.li_dorpdown').mouseleave(function () {
        $('.dorpdown-layer').hide();
    });
    $('.icon-close').click(function () {
        $('.top_banner').hide();
    });
    $('.my_center_box_left a').hover(function () {

    });
    $('.cate-layer-right-slide img').mouseenter(function () {

        $(this).delay('300').animate(300);
    });
    $('.cate-layer-right-slide img').mouseleave(function () {
        $(this).css('border', 'none')
    });
    $()


</script>


<script language="javascript" type="text/javascript">
    $(function () {
        //全选或全不选
        $("#all").click(function () {
            if (this.checked) {
                $("#list :checkbox").prop("checked", true);
            } else {
                $("#list :checkbox").prop("checked", false);
            }
        });
        //全选
        $("#selectAll").click(function () {
            $("#list :checkbox,#all").prop("checked", true);
        });
        //				//全不选
        //				$("#unSelect").click(function() {
        //					$("#list :checkbox,#all").prop("checked", false);
        //				});
        //				//反选
        //				$("#reverse").click(function() {
        //					$("#list :checkbox").each(function() {
        //						$(this).prop("checked", !$(this).prop("checked"));
        //					});
        //					allchk();
        //				});

        //设置全选复选框
        $("#list :checkbox").click(function () {
            allchk();
        });

        //获取选中选项的值
        $("#getValue").click(function () {
            var valArr = new Array;
            $("#list :checkbox[checked]").each(function (i) {
                valArr[i] = $(this).val();
            });
            var vals = valArr.join(',');
            alert(vals);
        });
    });

    function allchk() {
        var chknum = $("#list :checkbox").size(); //选项总个数
        var chk = 0;
        $("#list :checkbox").each(function () {
            if ($(this).prop("checked") == true) {
                chk++;
            }
        });
        if (chknum == chk) { //全选
            $("#all").prop("checked", true);
        } else { //不全选
            $("#all").prop("checked", false);
        }
    }

    //数量变化
    //		$(".amount_warp").find(".btn_add").click(function() { //点击数量增加
    //			var index = $(this).parent().siblings(".buy_num").val();
    //			index++;
    //			$(this).parent().siblings(".buy_num").val(index--);
    //		});
    //		$(".amount_warp").find(".btn_reduce").click(function() { //点击数量减少
    //			var index = $(this).parent().siblings(".buy_num").val();
    //			if(index > 1) {
    //				index--;
    //			}
    //
    //			$(this).parent().siblings(".buy_num").val(index++);
    //		})

    $('.li_dorpdown').hover(function () {
        $('.dorpdown-layer').show();
    });
    $('.li_dorpdown').mouseleave(function () {
        $('.dorpdown-layer').hide();
    });
    $('.icon-close').click(function () {
        $('.top_banner').hide();
    });
    $('.my_center_box_left a').hover(function () {

    });
    $('.cate-layer-right-slide img').mouseenter(function () {

        $(this).delay('300').animate(300);
    });
    $('.cate-layer-right-slide img').mouseleave(function () {
        $(this).css('border', 'none')
    });
    $()
</script>


<script>
    //结算功能，扣钱
    function settlement() {
        //获取商品总价
        let total = $(".total_text").html();
        let totalNumber = total.replace(/[^0-9]/ig,"");


        let dbUser = localStorage.getItem("userInfo");

        let obj = JSON.parse(dbUser);

        let balance = obj.userBalance;
        let name = obj.userName;



        let paramUser = {
            userName:name,
            totalNumber:balance - totalNumber
        };


        httpGetWithParams("/walletServlet",paramUser,promptresults);

        function promptresults() {

            let dbUser = localStorage.getItem("userInfo");
            let obj = JSON.parse(dbUser);
            obj.userBalance = balance - totalNumber;
            let dbUserJson = JSON.stringify(obj);
            localStorage.setItem("userInfo",dbUserJson);

            window.alert("结算成功！");
            location.href = "user.html";
        }
    }
</script>

<script type="text/javascript" src="js/carts.js"></script>

</html>